<template>
  <div class="mine">
    <!-- 用户信息卡片 -->
    <div class="user-card">
      <div class="user-info">
        <van-image
          round
          width="64"
          height="64"
          :src="userStore.userInfo.avatar"
        />
        <div class="info-content">
          <div class="username">{{ userStore.userInfo.realName || '未设置姓名' }}</div>
          <div class="user-id">ID: {{ userStore.userInfo.userId }}</div>
        </div>
      </div>
    </div>

    <!-- 功能列表 -->
    <div class="function-list">
<!--      &lt;!&ndash; 健康管理 &ndash;&gt;-->
<!--      <van-cell-group class="cell-group" title="健康管理">-->
<!--        <van-cell-->
<!--          title="健康档案"-->
<!--          icon="records"-->
<!--          is-link-->
<!--          to="/health/record"-->
<!--        />-->
<!--        <van-cell-->
<!--          title="我的预约"-->
<!--          icon="clock-o"-->
<!--          is-link-->
<!--          to="/appointment"-->
<!--        />-->
<!--        <van-cell-->
<!--          title="家庭成员"-->
<!--          icon="friends-o"-->
<!--          is-link-->
<!--          to="/family"-->
<!--        />-->
<!--      </van-cell-group>-->

      <!-- 账号设置 -->
      <van-cell-group class="cell-group" title="账号设置">
        <van-cell
          title="个人资料"
          icon="user-o"
          is-link
          to="/user/profile"
        />
        <van-cell
          title="修改密码"
          icon="lock"
          is-link
          to="/user/password"
        />
      </van-cell-group>

      <!-- 其他 -->
<!--      <van-cell-group class="cell-group" title="其他">-->
<!--        <van-cell-->
<!--          title="关于我们"-->
<!--          icon="info-o"-->
<!--          is-link-->
<!--          to="/about"-->
<!--        />-->
<!--        <van-cell-->
<!--          title="意见反馈"-->
<!--          icon="comment-o"-->
<!--          is-link-->
<!--          to="/feedback"-->
<!--        />-->
<!--      </van-cell-group>-->


    </div>

    <!-- 退出登录按钮 -->
    <div class="logout-btn">
      <van-button
        block
        round
        type="danger"
        @click="handleLogout"
      >
        退出登录
      </van-button>
    </div>
  </div>
</template>

<script setup>
import { useUserStore } from '@/stores/user.js'
import { useRouter } from 'vue-router'
import { showDialog } from 'vant'
import defaultAvatar from '@/assets/default-avatar.png'

const userStore = useUserStore()
const router = useRouter()

const handleLogout = () => {
  showDialog({
    title: '提示',
    message: '确定要退出登录吗？',
    showCancelButton: true
  }).then(async () => {
    await userStore.userLogout()
    router.push('/login')
  }).catch(() => {
    // 取消退出
  })
}
</script>

<style lang="scss" scoped>
.mine {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding-bottom: 20px;

  .user-card {
    background-color: #fff;
    padding: 20px 16px;
    margin-bottom: 12px;

    .user-info {
      display: flex;
      align-items: center;

      .info-content {
        margin-left: 16px;
        flex: 1;

        .username {
          font-size: 18px;
          font-weight: 500;
          color: #323233;
          margin-bottom: 4px;
        }

        .user-id {
          font-size: 14px;
          color: #969799;
        }
      }
    }
  }

  .function-list {
    .cell-group {
      margin-bottom: 12px;

      :deep(.van-cell-group__title) {
        padding: 16px 16px 8px;
        font-size: 14px;
        color: #969799;
      }

    }
  }

  .logout-btn {
    margin: 24px 16px;
  }
}

// 深色模式适配
@media (prefers-color-scheme: dark) {
  .mine {
    background-color: #1c1c1e;

    .user-card {
      background-color: #2c2c2e;

      .user-info {
        .info-content {
          .username {
            color: #fff;
          }
        }
      }
    }

    :deep(.van-cell) {
      background-color: #2c2c2e;
      color: #fff;

      &::after {
        border-color: #3a3a3c;
      }
    }
  }
}
</style>
